<template>
    <div class="about">
        <h4>{{ name }}</h4>
    </div>
    <hr />
    <div>
        <input type="text" v-model="inputValue" @keydown.enter="add" placeholder="输入内容后按：回车" />
        <br />
        <div v-for="(item,i) in store.state.taskList" :key:any="i" class="items">
            <span
                class="iteminput"
                :class="item.isfinished ? 'selectedcss' : ''"
                @click="update(item, i)"
            >{{ item.name }}</span>
            <span @click="del(i)">✕</span>
        </div>
    </div>
</template>

<script lang='ts'>
import { ref, watch } from 'vue';
import { useStore } from 'vuex'

export default {
    name: 'about',
    setup() {
        const store = useStore();
        const name = ref('酱紫出品');
        const inputValue = ref('');
        const add = () => {
            if (!inputValue.value) {
                return
            }
            store.commit('add', inputValue.value);
            inputValue.value = '';
        };

        const del = (i: any) => {
            store.commit('del', i * 1)
            console.log(i);
        };

        const update = (item: any, i: any) => {
            store.commit('updates', { index: i * 1, isfinished: !item.isfinished })
        }

        return {
            update,
            add,
            del,
            inputValue,
            name,
            store
        };
    }
};
</script>

<style scoped>
.items {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 20px auto;
    border-bottom: 1px solid #ccc;
    width: 400px;
}
.iteminput {
    width: 100px;
}
.selectedcss {
    text-decoration: line-through;
    color: #ccc;
}
input {
    width: 300px;
    height: 30px;
    border: 2px solid #ccc;
    border-radius: 5px;
}
</style>